<template>
  <div>
    <!--工具栏-->
    <div class="head-container" style="margin-top: 5px">
      <crudOperation/>
    </div>
    <!--表格渲染-->
    <el-table border stripe ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
              @filter-change="crud.handleFilterChange"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column v-if="columns.visible('startTime')" prop="startTime"
                       :show-overflow-tooltip="true"
                       label="开始时间" min-width="140">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('endTime')" prop="endTime"
                       :show-overflow-tooltip="true"
                       label="结束时间" min-width="140">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('operationType')" prop="operationType"
                       min-width="150px" label="操作"
                       key="operationType"
                       :filters="operationTypeFilters"
                       :filter-method="filterOptType"
                       filter-placement="bottom-end" :filter-multiple="false" column-key="operationType">
        <template slot-scope="scope">
          {{ getOptShwoText(scope.row.operationType) }}
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('costTime')" prop="costTime" label="耗时"/>
      <el-table-column v-if="columns.visible('crtUser')" :show-overflow-tooltip="true"
                       prop="crtUser" label="操作人"/>
      <el-table-column v-if="columns.visible('status')" :show-overflow-tooltip="true" label="状态"
                       prop="status"
                       key="status"
                       :filters="[{ text: '成功', value: 'SUCCESS' }, { text: '失败', value: 'FAIL' }]"
                       :filter-method="filterStatus"
                       filter-placement="bottom-end" :filter-multiple="false" column-key="status">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.status=='SUCCESS'" align="center"
                  type="success"
                  style="width:60px;">成功
          </el-tag>
          <el-tag size="small" v-if="scope.row.status=='FAIL'" align="center" type="error"
                  style="width:60px;">失败
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('runLog')" width="120" prop="runLog" label="执行日志">
        <template slot-scope="scope">
          <div>
            <el-button type="info" icon="el-icon-search"
                       @click="showRunLog(scope.row.runLog)">查看
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="运行记录" :visible.sync="runLogDialogVisible" width="30%" center>
      <div style="max-height: 400px;overflow-y: auto">
        <p v-html='runLogInfo'></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/components/CRUD.OnlyLookOperation'

const defaultForm = {}
const defaultCrud = CRUD({
  title: '调度服务操作日志',
  url: '/api/agentOptLog/selectPages',
  sort: 'sort,asc'
})
export default {
  name: 'optLog',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    agentInfo: Object,
    default: null
  },
  data() {
    return {
      runLogDialogVisible: false,
      runLogInfo: null,
      operationTypeFilters: [
        {text: '发布', value: 'install'},
        {text: '启动', value: 'start'},
        {text: '停用', value: 'stop'},
        {text: '重启', value: 'restart'},
        {text: '升级', value: 'upgrade'},
        {text: '恢复', value: 'restore'},
      ]
    }
  },
  computed: {},
  created() {

  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params['agentCode'] = this.agentInfo.agentCode
    },
    filterStatus(value, row) {
      return row.status === value;
    },
    filterOptType(value, row) {
      return row.operationType === value;
    },
    getOptShwoText(operationType) {
      let text = '未知';
      this.operationTypeFilters.forEach(val => {
        if (operationType === val.value) {
          text = val.text;
        }
      })
      return text;
    },
    showRunLog(info) {
      this.runLogDialogVisible = true
      this.runLogInfo = info
    },
  }
}
</script>
